<template>
    <div>
        <van-row type="flex">
            <!-- 左边导航 -->
            <div class="left">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item
                        :title="item.cat_name"
                        v-for="(item,index) in catesList "
                        :key="index"
                    />
                </van-sidebar>
            </div>
            <!-- 右边分类 -->
            <div class="right">
                <van-row
                    v-for="(item,index) in catesList.length && catesList[activeKey].children"
                    :key="index"
                >
                    <van-row type="flex" class="title" justify="center">/{{item.cat_name}}/</van-row>
                    <van-row>
                        <van-grid :border="false" :column-num="3">
                            <van-grid-item
                                v-for="(item1,index1) in item.children"
                                :key="index1"
                                @click="handlechange(item1.cat_id)"
                            >
                                <van-image :src="item1.cat_icon" class="img"/>
                                <van-col class="tips">{{item1.cat_name}}</van-col>
                            </van-grid-item>
                        </van-grid>
                    </van-row>
                </van-row>
            </div>
        </van-row>
    </div>
</template>

<script>
export default {
  data() {
    return {
      activeKey: 0,
      catesList: []
    };
  },
  created() {
    this.getCatesList();
  },
  methods: {
    async getCatesList() {
      const { data: res } = await this.$http.get("/categories");
      this.catesList = res.message;
    },
    handlechange(cat_id) {
      //   console.log(cat_id);
      this.$router.push(`/pages/goods_list?cid=${cat_id}`);
    }
  }
};
</script>

<style lang="less" scoped>
.title {
  color: #3c3c3c;
  font-size: 13px;
  font-weight: 700;
}
.img {
  width: 60px;
  height: 60px;
}
.tips {
  font-size: 12px;
}
.left {
  overflow: auto;
  height: 720px;
}
.right {
  height: 720px;
  width: 290px;
  overflow: auto;
}
.van-sidebar-item {
  height: 15px;
}
.van-grid-item {
  height: 90px;
}
</style>